<script setup>
import NavigationBar from "@/components/NavigationBar.vue";
import { ref, onMounted } from "vue";
import vueDanmaku from "vue3-danmaku";
import homeImg from "@/assets/homeImg/home.png";

//动画加载
const isShowAnimation = ref(false);
onMounted(() => {
  // 模拟加载延迟后显示标题
  setTimeout(() => {
    isShowAnimation.value = true;
  }, 100);
});

const isTextMin = ref(false);
onMounted(() => {
  // 模拟加载延迟后显示标题
  setTimeout(() => {
    isTextMin.value = true;
  }, 100);
});
setTimeout(() => {
  isTextMin.value = false;
}, 3000);

const isShowRotatingBox = ref(false);
onMounted(() => {
  // 模拟加载延迟后显示标题
  setTimeout(() => {
    isShowRotatingBox.value = true;
  }, 3500);
});

const danmus = ref([
  // 核心发明
  { commentContent: "东汉蔡伦改进造纸术，文明传播加速器" },
  { commentContent: "北宋毕昇活字印刷术，知识革命里程碑" },
  { commentContent: "唐代火药军事化应用，改变战争形态" },
  { commentContent: "宋代指南针航海导航，开启大航海前奏" },

  // 天文历法
  { commentContent: "张衡浑天仪模拟天体，早欧洲千年" },
  { commentContent: "郭守敬《授时历》误差仅26秒" },
  { commentContent: "僧一行实测子午线，地理测量突破" },
  { commentContent: "元代简仪革新天文观测精度" },

  // 数学成就
  { commentContent: "祖冲之圆周率第七位，领先千年" },
  { commentContent: "《九章算术》方程术奠基代数学" },
  { commentContent: "秦九韶大衍求一术解同余方程" },
  { commentContent: "朱世杰四元术解多元高次方程" },

  // 医药卫生
  { commentContent: "《黄帝内经》确立中医理论体系" },
  { commentContent: "李时珍《本草纲目》收录药物1892种" },
  { commentContent: "华佗麻沸散开创外科手术先河" },
  { commentContent: "宋慈《洗冤集录》世界首部法医专著" },

  // 工程技术
  { commentContent: "战国都江堰无坝引水沿用至今" },
  { commentContent: "隋代赵州桥敞肩拱结构典范" },
  { commentContent: "宋代水密隔舱技术保航海安全" },
  { commentContent: "明代《天工开物》详录工艺技术" },

  // 农学地理
  { commentContent: "《齐民要术》最古完整农书" },
  { commentContent: "徐霞客30年考察开创地貌研究" },
  { commentContent: "郦道元《水经注》记载1252条河流" },
  { commentContent: "王祯《农书》首创农具图谱" },

  // 特殊成就
  { commentContent: "曾侯乙编钟十二平均律实践" },
  { commentContent: "战国提花机织造复杂纹样" },
  { commentContent: "唐代《新修本草》首部官修药典" },
  { commentContent: "清代《畴人传》首部科学家传记集" },

  // 理论突破
  { commentContent: "《墨经》记载杠杆原理与小孔成像" },
  { commentContent: "沈括《梦溪笔谈》首记磁偏角现象" },
  { commentContent: "贾思勰提出「顺天时，量地利」农学观" },
  { commentContent: "徐光启《农政全书》融合中西农学" },
  // 极简模式（保留核心关键词）
  { commentContent: "造纸术·文明载体革新" },
  { commentContent: "圆周率·祖冲之精度巅峰" },
  { commentContent: "《本草纲目》·药物学丰碑" },

  // 时空标注模式
  { commentContent: "〈汉〉张衡候风地动仪" },
  { commentContent: "〈宋〉《武经总要》火药配方" },
  { commentContent: "〈元〉黄道婆革新棉纺技术" },
]);

const colorList = ref([
  "rgb(204,255,255)",
  "white",
  "rgb(204,255,204)",
  "white",
  "rgb(0,255,255)",
  "white",
  "rgb(255,204,255)",
  "pink",
]);
// 生成随机颜色的函数
function getRandomColor() {
  const color = colorList.value[Math.floor(Math.random() * 8)];
  return color;
}
</script>

<template>
  <!-- 尾页 -->
  <div class="lastPage">
    <!-- 导航栏 -->
    <Transition
      name="custom-classes"
      enter-active-class="animate__animated animate__fadeInDown"
      leave-active-class="animate__animated animate__bounceOutRight"
    >
      <NavigationBar v-if="isShowAnimation"></NavigationBar>
    </Transition>
    <el-image
      fit="cover"
      style="width: 100%; height: 100%"
      class="image"
      :src="homeImg"
    >
    </el-image>

    <!-- 标题 -->
    <!-- <div class="title">
      <Transition
        enter-active-class="animate__animated animate__bounceInDown"
        leave-active-class="animate__animated animate__bounceOutUp"
      >
        <Title v-show="isTextMin" class="title1" :title="'华'"></Title>
      </Transition>

      <Transition
        enter-active-class="animate__animated animate__bounceInDown"
        leave-active-class="animate__animated animate__bounceOutUp"
      >
        <Title v-show="isTextMin" class="title2" :title="'夏'"></Title>
      </Transition>

      <Transition
        enter-active-class="animate__animated animate__bounceInDown"
        leave-active-class="animate__animated animate__bounceOutUp"
      >
        <Title v-show="isTextMin" class="title3" :title="'熵'"></Title>
      </Transition>

      <Transition
        enter-active-class="animate__animated animate__bounceInDown"
        leave-active-class="animate__animated animate__bounceOutUp"
      >
        <Title v-show="isTextMin" class="title4" :title="'鉴'"></Title>
      </Transition>

      <Transition
        enter-active-class="animate__animated animate__bounceInDown"
        leave-active-class="animate__animated animate__bounceOutUp"
      >
        <Title v-show="isTextMin" class="title5" :title="'录'"></Title>
      </Transition>
    </div> -->

    <!-- 旋转盒子 -->
    <!-- <div class="rotatingBox">
      <div class="box">
        <Transition
          enter-active-class="isShowBox1"
          leave-active-class="animate__animated animate__bounceOutUp"
        >
          <div v-show="isShowRotatingBox" class="face box1">1</div>
        </Transition>
        <Transition
          enter-active-class="isShowBox2"
          leave-active-class="animate__animated animate__bounceOutUp"
        >
          <div v-show="isShowRotatingBox" class="face box2">2</div>
        </Transition>
        <Transition
          enter-active-class="isShowBox3"
          leave-active-class="animate__animated animate__bounceOutUp"
        >
          <div v-show="isShowRotatingBox" class="face box3">3</div>
        </Transition>
        <Transition
          enter-active-class="isShowBox4"
          leave-active-class="animate__animated animate__bounceOutUp"
        >
          <div v-show="isShowRotatingBox" class="face box4">4</div>
        </Transition>
        <Transition
          enter-active-class="isShowBox5"
          leave-active-class="animate__animated animate__bounceOutUp"
        >
          <div v-show="isShowRotatingBox" class="face box5">5</div>
        </Transition>
        <Transition
          enter-active-class="isShowBox6"
          leave-active-class="animate__animated animate__bounceOutUp"
        >
          <div v-show="isShowRotatingBox" class="face box6">6</div>
        </Transition>
      </div>
    </div> -->



    <div class="text1" >
      <DynamicCharacters 
     class="box1"
      :style="'letter-spacing: 20px; font-size: 0.8rem;'" 
      text="仰观璇玑&#160;&#160;&#160;俯察地脉"
      animate="animate__bounceInRight"
      ></DynamicCharacters>
      <!-- <div class="box1 box">仰观璇玑&#160;&#160;&#160;&#160;俯察地脉</div> -->
      <!-- <div class="box2 box">———华夏千年格物之道———</div> -->
      <DynamicCharacters 
     
      class="box2"
      text="———华夏千年格物之道———"
      animate="animate__bounceInRight"
      ></DynamicCharacters>
    </div>






    <!-- 弹幕 -->
    <div class="baberrage">
      <vue-danmaku
        class="danmu"
        :use-slot="true"
        :font-size="25"
        :top="50"
        :right="10"
        :is-suspend="true"
        :random-channel="true"
        :debounce="500"
        :speeds="100"
        :danmus="danmus"
        loop
      >
        <template v-slot:dm="{ danmu }">
          <div class="danmaku-name">
            <div class="bullet-item">
              <!-- <el-image class="img" style="width: 30px; height: 30px" :src="`/src/assets/loge.webp`" fit="cover"></el-image> -->
              <div class="text" :style="{ color: '#fff' }">
                {{ danmu.commentContent }}
              </div>
            </div>
          </div>
        </template>
      </vue-danmaku>
    </div>
  </div>
</template>

<style lang="scss" scoped>
// @keyframes rotate {
//   from {
//     transform: rotateX(-30deg) rotateY(0deg);
//   }
//   to {
//     transform: rotateX(-30deg) rotateY(360deg);
//   }
// }
// @keyframes box1 {
//   to {
//     opacity: 0.6;
//     transform: rotateY(0deg) translateZ(400px); /* 目标位置 */
//   }
// }
// @keyframes box2 {
//   to {
//     opacity: 0.6;
//     transform: rotateY(60deg) translateZ(400px);
//     /* 目标位置 */
//   }
// }
// @keyframes box3 {
//   to {
//     opacity: 0.6;
//     transform: rotateY(120deg) translateZ(400px); /* 目标位置 */
//   }
// }
// @keyframes box4 {
//   to {
//     opacity: 0.6;
//     transform: rotateY(180deg) translateZ(400px);
//   }
// }
// @keyframes box5 {
//   to {
//     opacity: 0.6;
//     transform: rotateY(240deg) translateZ(400px);
//   }
// }
// @keyframes box6 {
//   to {
//     opacity: 0.6;
//     transform: rotateY(300deg) translateZ(400px);
//   }
// }
.lastPage {
  position: relative;

  .text1{
  font-family: 'kaiti' !important;
    
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .box1{
      width: 100vw;
      display: flex;
      justify-content: center;
      letter-spacing: 20px; 
        font-size: 83px !important;

    }
    .box2{

      margin-top: 20px;
    }
  }

  .rotatingBox {
    position: absolute;
    top: 40%;
    left: 50%;
    width: 200px;
    height: 200px;
    transform: translate(-50%, -50%);
    perspective: 2000px;
    perspective-origin: 50% 50%;
    // background: #a0ea8e;
    .box {
      position: relative;
      width: 100%;
      height: 100%;
      // background: #ce6f6f;
      transform-style: preserve-3d;
      // transform: rotateX(-45deg);
      animation: rotate 10s infinite linear;
      .face {
        position: absolute;
        width: 200px;
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2em;
        opacity: 0;
        background: #256eb8;
        // 正六边形参数计算
        // $base-angle: 60deg;
        // @for $i from 1 through 6 {
        //   &:nth-child(#{$i}) {
        //     transform: rotateY(($i - 1) * $base-angle)
        //       translateZ(300px); // 匹配正六边形半径
        //   }
        // }
      }
      .box1 {
        background: url(@/assets/bgImg/bgImg2.jpg) no-repeat 0 20%/100%;
        animation: box1 1s 1.5s ease-out forwards;
        // transform: rotateY(0deg) translateZ(400px);
      }
      .box2 {
        background: url(@/assets/bgImg/bgImg3.jpg) no-repeat 0 20%/100%;

        animation: box2 1s 1.2s ease-out forwards;
      }
      .box3 {
        background: url(@/assets/bgImg/bgImg1.jpg) no-repeat 0 20%/100%;

        animation: box3 1s 0.9s ease-out forwards;
      }
      .box4 {
        background: url(@/assets/bgImg/bgImg4.jpg) no-repeat 0 20%/100%;

        animation: box4 1s 0.6s ease-out forwards;
      }
      .box5 {
        background: url(@/assets/bgImg/bgImg1.jpg) no-repeat 0 20%/100%;

        animation: box5 1s 0.3s ease-out forwards;
      }
      .box6 {
        background: url(@/assets/bgImg/bgImg2.jpg) no-repeat 0 20%/100%;

        animation: box6 1s ease-out forwards;
      }
    }
  }

  .title1 {
    --animate-duration: 0.6s; /* 控制动画速度 */
  }
  .title2 {
    --animate-duration: 0.7s; /* 控制动画速度 */
  }
  .title3 {
    --animate-duration: 0.8s; /* 控制动画速度 */
  }
  .title4 {
    --animate-duration: 0.9s; /* 控制动画速度 */
  }
  .title5 {
    --animate-duration: 1s; /* 控制动画速度 */
  }

  position: relative;
  width: 100%;
  height: 100vh;
  // background: url("/src/assets/homeImg/home.png") no-repeat center/cover;
  // position: relative;
  overflow: hidden;
  .title {
    position: absolute;
    // background: #c76d6d;
    display: flex;
    width: 600px;
    height: 250px;
    margin-left: 50px;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
  }
  .danmu {
    position: absolute;
    top: 15%;
    left: 0;
    width: 100%;
    height: 650px;
    // background: #000;
    .danmaku-name {
      .bullet-item {
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(0, 0, 0, 0.05);
        height: 36px;
        padding: 0 6px;
        border-radius: 30px;
        .img {
          border-radius: 50%;
        }
        .text {
          margin-left: 10px;
          font-size: 20px;
        }
      }
    }
  }
}
</style>
